/**
 * lineDom 指针的实例
 * ruleDom 整个时间轴的实例
 * valueDom 需要展示当前时间点的实例
 * timePoint 时间点数组
 * minWidth 指针相对于时间轴最小的定位
 * maxWidth 指针相对于时间轴最大的定位
 * slotWidth 每个时间点格子的宽度
 * 此组件外面包的div不要出现定位，否则会出现偏移量计算错误
 */
export default class MoveLine {
  constructor(lineDom, ruleDom, valueDom, timePoint, minWidth = 19, maxWidth = 1199, slotWidth = 20) {
    this.lineDom = lineDom
    this.ruleDom = ruleDom
    this.valueDom = valueDom
    this.timePoint = timePoint
    this.minWidth = minWidth
    this.maxWidth = maxWidth
    this.slotWidth = slotWidth
    valueDom.innerHTML = timePoint[0]
  }
  move() {
    this.flag = true
    document.addEventListener('mousemove', e => {
      if (this.flag) {
        this.toMove(e)
      }
    })
  }
  stop() {
    this.flag = false
  }
  toMove(event) {
    const w = event.clientX - (this.ruleDom.offsetParent.offsetParent.offsetLeft + this.ruleDom.offsetLeft - this.ruleDom.parentElement.parentElement.parentElement.scrollLeft)
    if (w < this.minWidth) {
      return this.lineDom.style.left = this.minWidth + 'px'
    }
    if (w > this.maxWidth) {
      return this.lineDom.style.left = this.maxWidth + 'px'
    }
    this.setTime(w)
    this.lineDom.style.left = w + 'px'
  }
  resetLine() {
    this.lineDom.style.left = this.minWidth + 'px'
  }
  getArr(arr) {
    this.timePoint = arr
    this.valueDom.innerHTML = arr[0]
  }
  setTime(w) {
    const index = Math.floor(w / this.slotWidth)
    this.valueDom.innerHTML = this.timePoint[index]
    this.timeValue = this.timePoint[index]
  }
}
